<template>
    <div>
        <div >
          <mt-header  title="注册会员" style="background: linear-gradient(#000000, #035838);">
            <mt-button icon="back" slot="left" @click="goBack()">返回</mt-button>
            </mt-header>
        </div>
        <div >
            <mt-field label="手机号" placeholder="请输入手机号" v-model="telephoneNumber"></mt-field>
        </div>
        <div>
            <tr>
            <td><mt-field label="验证码" placeholder="请输入验证码" v-model="identifyingCode"></mt-field></td>
            <td><input class="mint-button mint-button--default mint-button--small" type="button" id="btn35" value="获取验证码" @click="getIdentifyingCode()"></td>
            </tr>
       </div>
       <div class="promoters-button">
            <button class="mint-button mint-button--default mint-button--large is-plain" @click="updatePassword()">
                <label class="mint-button-text">下一步</label>
            </button>
      </div>
 
    </div>
  
</template>
<script>
import axios from "axios";
import { Indicator } from "mint-ui";
import { Toast } from 'mint-ui';

export default {
  data() {
    return {
        telephoneNumber: '',
        oldtelephoneNumber: '',
        identifyingCode:''

    };
  },
  
  props: {},
  watch: {
  },
  mounted() {

  },
  created() {
    // 该方法用来更改tabbarshow的值 用来 展示、隐藏底部 tabbar (boolean为0 展示、boolean为1 隐藏)
   this.$store.dispatch("showTabbar", { boolean: '1' });
  },
  methods: {
    goBack() {
      this.$store.dispatch("showTabbar", { boolean: '0' });
      history.go(-1);
    },
    
    updatePassword() {
        
      let telephoneNumber = this.telephoneNumber;
      let identifyingCode = this.identifyingCode;
      let global_members_id = JSON.parse(localStorage.getItem('global_members_id'));
      axios({
        method: "post",
        url: "/api/phonesave/register.htm",
        params: {
            register_telephonenumber: telephoneNumber,
            register_code:identifyingCode
            }
        })
        .then(res => {
            res = res.data;
            if(res.zt === 'true') {
                this.$router.push({path: '/registerpassword',query: {rq: this.telephoneNumber}});
            }else {
                Indicator.close();
          let instance = Toast({
            message: "验证失败"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
            }
        })
      
    },
    // 获取验证码接口
    getIdentifyingCode(){
        let telephoneNumber = this.telephoneNumber;
        if(telephoneNumber === ""||telephoneNumber === null)
        {
            Indicator.close();
            let instance = Toast({
                message: "请输入手机号"
            });
            setTimeout(() => {
            instance.close();
            }, 2000);
        }
        else
        {
            if(telephoneNumber && /^1(3|4|5|7|8)\d{9}$/.test(telephoneNumber))  
                {
                    axios({
                        method: "post",
                        url: "/api/phonecode/register.htm",
                        params: {
                            register_telephonenumber: telephoneNumber
                            }
                        })
                        .then(res => {
                            res = res.data;
                            if(res.zt === 'true') {
                                this.$options.methods.reciprocal();
                                Indicator.close();
                                let instance = Toast({
                                    message: "验证码已发送"
                                });
                                setTimeout(() => {
                                    instance.close();
                                }, 2000);
                            }else {
                                Indicator.close();
                                let instance = Toast({
                                    message: "该手机号已注册"
                                });
                                setTimeout(() => {
                                    instance.close();
                                }, 2000);
                            }
                        })
                } 
                  else {
                        Indicator.close();
                        let instance = Toast({
                            message: "请输入正确的手机号"
                        });
                        setTimeout(() => {
                            instance.close();
                        }, 2000);
                }
        }
                    
                    
                

        
    },
    //获取验证码
    reciprocal () {
            var count = 60;
            var countdown = setInterval(CountDown, 1000);
            function CountDown() {
                $("#btn35").attr("disabled", true);
                $("#btn35").val("已发送" + count );
                if (count == 0) {
                    $("#btn35").val("获取验证码").removeAttr("disabled");
                    clearInterval(countdown);
                }
                count--;
            }
        }
  }
};
</script>
<style scoped>
.mint-cell-wrapper{
    background-image: none;
    background: red;
}
.promoters-button {
  height: 150px;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}


</style>